<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click.stop="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      <!-- #ifndef MP-WEIXIN -->
      可领取商家
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text @click="fanhui" style="margin-left: 75rpx">可领取商家</text>
      <!-- #endif -->
    </view>
    <view class="tit_lists" style="background-color: #f5f5f5" v-if="!id">
      <view class="tips">
        <image
          class="mig"
          src="https://pic.bangbangtongcheng.com/static/bbcz/gift_2.png"
          mode=""
        ></image>
        前往门店绑定会员，每月领取会员好礼哦～
      </view>
      <view
        class=""
        style="
          background-color: #fff;
          border-radius: 40rpx 40rpx 0 0;
          padding-left: 30rpx;
          padding-top: 32rpx;
        "
      >
        <scroll-view
          class="scroll-view"
          :scroll-y="modalName == '' || modalName == null"
          @scrolltolower="down"
          :scroll-top="scrollTop1"
          @scroll="scroll"
          refresher-background="#f5f5f5"
        >
          <view class="liss" v-for="(item, index) in Recommend" :key="index">
            <image
              class="image"
              mode="aspectFit"
              :src="item.storePicture"
              @click="shopDetail(item)"
            />
            <view class="li_3" style="max-width: 336rpx">
              <view class="li_3_top">
                <view class="" style="display: flex; flex-direction: column">
                  <view class="title" style="height: 32rpx; line-height: 32rpx">{{
                    item.merchantName
                  }}</view>
                  <view class="red" v-if="item.score">
                    服务好评率{{ Number(item.score).toFixed(0) }}%</view
                  >
                  <view class="red" v-else>暂无评分</view>
                  <view class="content" style="line-height: 30rpx">
                    {{ item.storeAddress }}
                  </view>
                </view>
                <view class="distance" @click="openMap(item)">
                  <image
                    class="img"
                    src="https://pic.bangbangtongcheng.com/static/member/mapto.png"
                    mode=""
                  >
                  </image>

                  <!-- <image class="img"
										src="https://pic.bangbangtongcheng.com/static/bbcz/Navigation.png" mode="">
									</image> -->
                  {{ item.distance }}km
                </view>
              </view>
            </view>
          </view>
          <view v-if="Recommend.length == 0" class="none">
            <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
            <view>{{ downStatus ? '加载中...' : '没有更多数据了' }}</view>
          </view>
          <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
        </scroll-view>
      </view>
    </view>
    <view class="tit_list" v-else>
      <scroll-view
        class="scroll-views"
        :scroll-y="modalName == '' || modalName == null"
        @scrolltolower="down"
        :scroll-top="scrollTop1"
        @scroll="scroll"
        refresher-background="#f5f5f5"
      >
        <view class="liss" v-for="(item, index) in Recommend" :key="index">
          <image
            class="image"
            mode="aspectFit"
            :src="item.storePicture"
            @click="shopDetail(item)"
          />
          <view class="li_3" style="max-width: 336rpx">
            <view class="li_3_top">
              <view class="title" style="height: 32rpx; line-height: 32rpx">{{
                item.merchantName
              }}</view>
              <view class="red" v-if="item.score">
                服务好评率{{ Number(item.score).toFixed(0) }}%</view
              >
              <view class="red" v-else>暂无评分</view>
              <view class="content" style="line-height: 30rpx">
                {{ item.storeAddress }}
              </view>
            </view>
            <view class="">
              <view
                class="giftName"
                style="
                  margin-bottom: 18rpx;
                  font-size: 24rpx;
                  font-weight: 400;
                  color: #333333;
                  line-height: 24rpx;
                "
                v-if="showBottom"
              >
                {{ giftName }}
              </view>
              <view
                class="li_3_bottom"
                style="margin-bottom: 8rpx; height: 24rpx; line-height: 24rpx"
              >
                <view class="" style="white-space: nowrap">
                  <template v-if="showBottom">
                    余:{{ item.merchantGiftDistributions[0].stock }}份
                  </template>
                </view>
                <view class="distance" @click="openMap(item)">
                  <image
                    class="img"
                    src="https://pic.bangbangtongcheng.com/static/bbcz/Navigation.png"
                    mode=""
                  >
                  </image>
                  {{ item.distance }}km
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-if="Recommend.length == 0" class="none">
          <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
          <view>{{ downStatus ? '加载中...' : '没有更多数据了' }}</view>
        </view>
        <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
      </scroll-view>
    </view>
    <uniBall></uniBall>
    <dLoading v-if="loding"></dLoading>
  </view>
</template>

<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  import { mapGetters } from 'vuex'
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  import Tabbar from '@/components/tabbar.vue'
  export default {
    data() {
      return {
        loding: true,
        modalName: '',
        pageSize: 10,
        pageNo: 1,
        Recommend: [],
        imgUrl: this.$imgSrc,
        showType: false,
        orderSort: '1',
        scrollTop: '0',
        scrollTop1: '0',
        trigger: false,
        downStatus: true,
        upStatus: true,
        CustomBar1: '',
        latitude: '',
        longitude: '',
        id: '',
        user: uni.getStorageSync('Pduser'),
        userInfo: uni.getStorageSync('Pduser'),
        giftName: '',
        giftType: '',
        option: {},
        showBottom: true,
        targetId: '',
      }
    },
    components: {
      'view-tabbar': Tabbar,
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    filters: {
      nums(val) {
        return val.toFixed(2)
      },
    },

    async onLoad(options) {
      if (options.id) {
        this.id = options.id
        this.giftName = options.giftName
        this.giftType = options.giftType

        if (!this.giftType || this.giftType == '2') {
          this.showBottom = false
        }
      }
      console.log('options', options)
      if (this.giftType == '2' && options.license) {
        await this.getMerchant(options.license)
      }

      this.license = options.license
      this.option = options
      if (this.option.from == 'bindQR') {
        uni.$u.toast('前往门店绑定会员码，每月领取会员好礼哦')
        this.type = 'all'
        // uni.showToast({
        // 	title:'前往门店绑定会员码，每月领取会员好礼哦',
        // 	icon:'none',
        // 	duration:2000
        // })
      }
      if (uni.getStorageSync('locationState') == 1) {
        this.getLocation()
      }
      this.CustomBar1 = this.CustomBar
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    onPageScroll: function (Object) {
      console.log(Object.scrollTop, '---') //实时获取到滚动的值
      this.scrollTop = Object.scrollTop
    },
    async onPullDownRefresh() {
      this.Recommend = []
      this.pageNo = 1
      this.downStatus = true
      if (this.upStatus) {
        this.trigger = true
        await this.getRecommend()
      }
    },
    methods: {
      getMerchant(license) {
        return this.$myRequest
          .get('/api/mobile/vehicleOwner/getMerchantInfoByLicensePlateNumber', {
            licensePlateNumber: license,
          })
          .then((res) => {
            this.targetId = (res.merchantInfo || {}).id
          })
      },
      scroll(e) {
        this.oldScrollTop = e.detail.scrollTop
        this.scrollTop = e.detail.scrollTop
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      totop() {
        this.scrollTop1 = this.oldScrollTop
        this.$nextTick(() => {
          this.scrollTop1 = 0
        })
      },
      details(id) {
        uni.navigateTo({
          url: '/pages_owner/dealer/dealerDetails?id=' + id,
        })
      },
      down() {
        if (this.downStatus) {
          this.pageNo++
          this.getRecommend()
        }
      },
      async up() {
        this.Recommend = []
        this.pageNo = 1
        this.downStatus = true
        if (this.upStatus) {
          this.trigger = true
          await this.getRecommend()
        }
      },
      getRecommend() {
        this.upStatus = false
        // if(this.type=='all'){
        // 	this.$myRequest
        // 		.get("/api/mobile/vehicleOwner/getEnterpriseListByUserId", {
        // 			userId: this.userInfo.id,
        // 			longitude: this.longitude,
        // 			latitude: this.latitude,
        // 			screeningType: 1,
        // 			pageSize:this.targetId?999: this.pageSize,
        // 			pageNo: this.pageNo,
        // 		}).then(res => {
        // 			uni.hideLoading();
        // 			if (!res.enterpriseList.pageList.length) {
        // 				this.downStatus = false;
        // 			}
        // 			if (res.enterpriseList.pageCount < this.pageNo * this.pageSize) {
        // 				this.downStatus = false;
        // 			}

        // 			this.upStatus = true;
        // 			this.trigger = false;
        // 			// this.merchantListV2 = res.enterpriseList.pageList
        // 			this.Recommend = this.Recommend.concat(res.enterpriseList.pageList);
        // 			uni.stopPullDownRefresh();
        // 			// this.wxUrl = res.r.gz_url;
        // 			// console.log(this.wxUrl)
        // 		})
        // 	return
        // }
        var param = {}
        if (this.type != 'all') {
          param.status = '1'
        }
        this.$myRequest
          .get('/api/mobile/vehicleOwner/getAvailableMerchantsList', {
            giftId: this.id,
            pageSize: this.targetId ? 999 : this.pageSize,
            pageNo: this.pageNo,
            longitude: this.longitude,
            latitude: this.latitude,
            licensePlateNumber: this.license || '',
            ...param,
          })
          .then((res) => {
            uni.hideLoading()
            if (!res.availableMerchantInformation.pageList.length) {
              this.downStatus = false
            }
            if (res.availableMerchantInformation.pageCount < this.pageNo * this.pageSize) {
              this.downStatus = false
            }

            this.loding = false
            if (this.targetId) {
              this.upStatus = true
              this.trigger = false
              this.Recommend = res.availableMerchantInformation.pageList.filter(
                (item) => item.id == this.targetId
              )
              return
            }
            this.upStatus = true
            this.trigger = false
            this.Recommend = this.Recommend.concat(res.availableMerchantInformation.pageList)
            uni.stopPullDownRefresh()
          })
      },
      // 获取位置
      async getLocation() {
        this.getLocation1()
      },
      shopDetail(item) {
        console.log(item)
        if (item.user.businessType == 1 && item.user.isShop == 1) {
          if (item.user.shopType == 1) {
            uni.navigateTo({ url: '/pages_intermediary/shopDetails?id=' + item.user.shopId })
          } else if (item.user.shopType == 2) {
            uni.navigateTo({
              url: '/pages_houses/houses/housesDetails?id=' + item.user.buildingsId,
            })
          }
        } else if (item.user.businessType == 2 && item.user.isShop == 1) {
          if (item.user.shopType == 1 || item.user.shopType == 2) {
            uni.navigateTo({
              url: '/pages_owner/dealer/dealerDetails?id=' + item.user.shopId,
            })
          } else if (item.user.shopType == 3 || item.user.shopType == 4) {
            // 跳维修店
            uni.navigateTo({
              url: '/pages_owner/ownerService/ownerServiceDetails?id=' + item.user.shopId,
            })
          }
        } else if (item.user.businessType == 0 && item.user.enterpriseRecruitmentStatus == 1) {
          uni.navigateTo({
            url: '/pages_recruitMoney/recruitmentDetails/companyDetails?userId=' + item.user.id,
          })
        } else {
          console.log(11111111)
          uni.navigateTo({ url: '/pages_owner/dealer/goldConsultant?userId=' + item.userId })
        }
        // uni.navigateTo({ url: '/pages_intermediary/shopDetails?id=' + item.merchantGiftDistributions[0].id })
      },
      getAuth() {
        let that = this
        this.timer = setInterval(() => {
          const authLocation = uni.getAppAuthorizeSetting().locationAuthorized
          console.log('authLocation', authLocation)
          if (authLocation.indexOf('authorized') > -1) {
            clearInterval(this.timer)
            that.getLocation1()
          }
          if (authLocation.indexOf('denied') > -1) {
            clearInterval(this.timer)
            that.getLocation1()
          }
        }, 1000)
      },
      judgeIosPermissionLocation() {
        return new Promise((resolve, reject) => {
          var result = false
          var cllocationManger = plus.ios.import('CLLocationManager')
          var status = cllocationManger.authorizationStatus()
          result = status != 2
          resolve(result)
        })
      },

      getLocation1() {
        let _this = this
        // uni.showLoading({
        // 	title: "加载中",
        // 	mask: true,
        // });
        uni.getLocation({
          type: 'gcj02',
          highAccuracyExpireTime: 3500,
          success(res) {
            console.log(res, '进来了')
            _this.latitude = res.latitude
            _this.longitude = res.longitude
            _this.getRecommend()
          },
          fail(res) {
            console.log(res, '经纬度没有授权')
            _this.loding = false
            _this.downStatus = false
            uni.setStorageSync('locationState', 0)
            if (uni.getStorageSync('locationState') == 0) {
              uni.showModal({
                title: '提示',
                content: '您已关闭位置权限或获取位置信息失败',
                success: function (res) {
                  if (res.confirm) {
                    // plus.runtime.openURL("app-settings:");
                    if (plus.os.name === 'iOS') {
                      plus.runtime.openURL('app-settings://')
                    } else {
                      var Intent = plus.android.importClass('android.content.Intent')
                      var Settings = plus.android.importClass('android.provider.Settings')
                      var Uri = plus.android.importClass('android.net.Uri')
                      var mainActivity = plus.android.runtimeMainActivity()
                      var intent = new Intent()
                      intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
                      var uri = Uri.fromParts('package', mainActivity.getPackageName(), null)
                      intent.setData(uri)
                      mainActivity.startActivity(intent)
                    }
                  } else if (res.cancel) {
                    console.log('用户点击取消')
                  }
                },
              })
              return false
            }
          },
        })
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      openMap(item) {
        let that = this
        /* #ifdef H5 */
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            // var longitude = latitude;
            // var latitude = latitude;
            // that.setWxShare(re.data)
            uni.hideLoading()
            wxshare.config({
              debug: false, //是否打开调试
              appId: re.data.appId, // 公众号的唯一标识
              timestamp: re.data.timestamp, // 生成签名的时间戳
              nonceStr: re.data.nonce, // ，生成签名的随机串
              signature: re.data.signature, // 签名
              jsApiList: ['openLocation'],
            })
            wxshare.ready(function () {
              wxshare.openLocation({
                latitude: Number(item.latitude), //目的地latitude
                longitude: Number(item.longitude), //目的地longitude
                name: item.merchantName,
                address: item.storeAddress,
                scale: 15, //地图缩放大小，可根据情况具体调整
              })
            })
          },
        })
        /* #endif */
        /* #ifndef H5 */
        uni.openLocation({
          latitude: Number(item.latitude),
          longitude: Number(item.longitude),
          name: item.merchantName,
          address: item.storeAddress,
          success: function () {
            console.log('success')
          },
        })
        /* #endif */
      },
    },
  }
</script>

<style lang="less" scoped>
  page {
    background-color: #fff;
  }

  .box {
    width: 100%;
    padding-bottom: 20rpx;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;
    /* #ifdef MP-WEIXIN */
    text-align: left;
    display: flex;
    align-items: center;
    /* #endif */

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      // top: 28rpx;
      /* #ifdef MP-WEIXIN */
      position: initial;
      margin-left: auto;
      margin-right: 200rpx;
      /* #endif */
      bottom: 16rpx !important;
      right: 30rpx;
      // #ifdef APP
      // top: 50%;
      // #endif
    }
  }

  .tit_lists {
    width: 750rpx;

    .tips {
      height: 84rpx;
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #f89540;

      .mig {
        width: 22rpx;
        height: 26rpx;
        margin-right: 10rpx;
      }
    }

    .tit {
      position: relative;
      margin-bottom: 32rpx;

      .view {
        display: inline-block;
        width: 120rpx;
        height: 58rpx;
        border-radius: 8rpx;
        text-align: center;
        line-height: 58rpx;
        color: #333;
        background-color: #f2f2f2;
        margin-right: 24rpx;
        font-size: 32rpx;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }

      .sai {
        position: absolute;
        font-size: 32rpx;
        top: 4rpx;
        right: 30rpx;

        span {
          margin-left: 8rpx;
          font-size: 20rpx;
        }
      }
    }

    .liss {
      width: 96%;
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      border-bottom: 2rpx solid #e0e0e0;
      display: flex;
      // justify-content: space-between;

      .image {
        background-color: #f8f8f8;
        width: 300rpx;
        height: 200rpx;
        border-radius: 20rpx;
      }

      .li_3 {
        margin-left: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .li_3_top {
          display: flex;
          flex-direction: column;

          .title {
            font-size: 28rpx;
            font-weight: 500;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1; //想要的行数
            -webkit-box-orient: vertical;
          }
          .red {
            color: red;
            font-size: 22rpx;
            margin-bottom: 10rpx;
            line-height: 28rpx;
          }

          .content {
            font-size: 22rpx;
            font-weight: 500;
            color: #666666;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; //想要的行数
            -webkit-box-orient: vertical;
          }

          .distance {
            width: 336rpx;
            font-size: 20rpx;
            font-weight: 400;
            color: #666666;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .img {
              width: 48rpx;
              height: 48rpx;
            }
          }
        }

        .li_3_bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          font-weight: 500;
          color: #333333;
        }
      }
    }
  }

  .tit_list {
    margin-top: 32rpx;
    margin-left: 30rpx;
    width: 720rpx;

    .tit {
      position: relative;
      margin-bottom: 32rpx;

      .view {
        display: inline-block;
        width: 120rpx;
        height: 58rpx;
        border-radius: 8rpx;
        text-align: center;
        line-height: 58rpx;
        color: #333;
        background-color: #f2f2f2;
        margin-right: 24rpx;
        font-size: 32rpx;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }

      .sai {
        position: absolute;
        font-size: 32rpx;
        top: 4rpx;
        right: 30rpx;

        span {
          margin-left: 8rpx;
          font-size: 20rpx;
        }
      }
    }

    .liss {
      width: 96%;
      padding-bottom: 30rpx;
      margin-bottom: 30rpx;
      border-bottom: 2rpx solid #e0e0e0;
      display: flex;
      // justify-content: space-between;

      .image {
        background-color: #f8f8f8;
        width: 300rpx;
        height: 200rpx;
        border-radius: 20rpx;
      }

      .li_3 {
        margin-left: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .li_3_top {
          display: flex;
          flex-direction: column;

          .title {
            font-size: 28rpx;
            font-weight: 500;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1; //想要的行数
            -webkit-box-orient: vertical;
          }
          .red {
            color: red;
            font-size: 22rpx;
            margin-bottom: 10rpx;
            line-height: 28rpx;
          }

          .content {
            font-size: 22rpx;
            font-weight: 500;
            color: #666666;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; //想要的行数
            -webkit-box-orient: vertical;
          }
        }

        .distance {
          width: 336rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: #666666;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .img {
            width: 28rpx;
            height: 28rpx;

            margin-right: 4rpx;
          }
        }

        .li_3_bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          font-weight: 500;
          color: #333333;
        }
      }
    }
  }

  .hui {
    position: fixed;
    right: 30rpx;
    bottom: 154rpx;
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    background-color: #fff;
    border-radius: 34rpx;
    font-size: 26rpx;
    box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);

    image {
      width: 46rpx;
      height: 46rpx;
      margin-right: 18rpx;
    }
  }

  .scroll-view {
    // #ifdef MP-WEIXIN
    height: calc(100vh - var(--status-bar-height) - 5px - 88rpx - 32rpx - 80rpx);
    // #endif
    // #ifdef H5 || APP-PLUS
    height: calc(100vh - var(--status-bar-height) - 5px - 88rpx - 32rpx - 80rpx);
    // #endif
  }

  .scroll-views {
    // #ifdef MP-WEIXIN
    height: calc(100vh - var(--status-bar-height) - 5px - 88rpx - 32rpx);
    // #endif
    // #ifdef H5 || APP-PLUS
    height: calc(100vh - var(--status-bar-height) - 5px - 88rpx - 32rpx);
    // #endif
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }
  .giftName {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; //作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
    -webkit-line-clamp: 2; //显示的行
  }
</style>
